<template>
  <main>
    <masthead 
      :imgUrl="imgUrl" 
      :page="page"
      :pageTitle="pageTitle"
    ></masthead>
    <article>
      <Row>
        <Col :xs="24" :sm="24" :md="24" :lg="17" :xl="17" class="left-module"> 
          <div class="message">
            <div class="des">
              <p align="center">有什么想说的, 在下方留言吧~</p> 
            </div>
            <p class="message-head">
              <span>评论</span>
            </p>
            <div id="vcomments"></div>
          </div>
        </Col>
        <right-module></right-module>
      </Row>
    </article>
  </main>
</template>

<script>
import Valine from 'valine'
import { getComment } from 'utils/initValine'

export default {
  name: 'Message',
  data() {
    return {
      imgUrl: 'http://cdn.yozora.top/image/message.jpg',
      page: 1,
      pageTitle: '留言'
    }
  },
  mounted() {
    getComment()
  },
  components: {
    "right-module": () => import("components/homePage/RightModule"),
    "masthead": () => import("components/masthead/Masthead")
  }
}
</script>

<style lang="scss" scoped>
main {
  max-width: 100%;
  margin: 0 auto;
  article {
    position: relative;
    max-width: 1180px;
    margin: 20px auto 0;
  }
}
.left-module {
  padding: 1rem;
  animation: main 0.3s linear;
  .message-head {
    &::before {
      position: absolute;
      top: -7px;
      left: 0;
      font-size: 24px;
      font-weight: bold;
      color: #eb5055;
      content: '|';
    }
    position: relative;
    margin-top: 52px;
    margin-bottom: 16px;
    font-size: 1rem;
    color: #24292e;
    span {
      margin-left: 12px;
    }
  }
  .message {
    padding: 1rem;
    box-shadow: 0 2px 9px rgba(31, 45, 61, 0.15);
    background: #fff;
    border-radius: 8px;
    .des {
      margin-top: 1rem;
      font-size: 1.2rem;
    }
  }
}
</style>